<template>
    <div class="container">
        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">

                <!-- 搜索+功能按钮 -->
                <el-form ref="search" :inline="true" :model="queryParams" size="medium">
                    <el-card class="table_tool_bar_wrap mb10" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="" prop="year">
                                    <el-date-picker
                                        size="medium"
                                        v-model="queryParams.year"
                                        value-format="yyyy"
                                        :clearable="false"
                                        :editable="false"
                                        type="year"
                                        style="width: 100px"
                                        placeholder="年份">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="">
                                    <DeptCascader
                                        ref="cascader_dept"
                                        :cascaderDeptVal.sync="queryParams.deptIds"
                                        :checkStrictly="true"
                                        styles="width: 250px"
                                        placeholder="所属部门"
                                        @clear="queryParams.deptIds=null">
                                    </DeptCascader>
                                </el-form-item>

                                <el-form-item label="" prop="status">
                                    <DictSelect ref="select" code="YGZT" :selectVal.sync="queryParams.status" placeholder="在职状态" styles="width:100%"></DictSelect>
                                </el-form-item>

                                <el-form-item label="" prop="keyword">
                                    <el-input v-model="queryParams.keyword" placeholder="请输入..." prefix-icon="el-icon-search" style="width: 180px" clearable/>
                                </el-form-item>

                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>

                            </div>

                            <div class="right">
                                <el-dropdown @command="handleCommand" class="ml10">
                                    <el-button type="primary" size="medium">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="export-data">导出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>

                            </div>
                        </div>

                    </el-card>
                </el-form>

                <!-- 表格 -->
                <el-table
                    class="jdl_table mt10"
                    ref="table"
                    size="medium"
                    height="560"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loading"
                    :data="dataList"
                    :summary-method="getSummaries"
                    show-summary
                    :cell-style="cellStyle"
                    @selection-change="handleSelection">

                    <el-table-column label="序号" type="index" prop="index" width="60" align="center"/>
                    <el-table-column label="工号" prop="workNo" align="left" width="100" show-overflow-tooltip/>
                    <el-table-column label="姓名" prop="name" align="left" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link @click="handleEmpJdlDetailVisible(scope.row.id)" type="primary" :underline="false">{{scope.row.name}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="部门" prop="deptName" align="left" width="150" show-overflow-tooltip/>
                    <el-table-column label="岗位" prop="postName" align="left" width="100" show-overflow-tooltip/>
                    <el-table-column label="在职状态" align="center" width="100px">
                        <template slot-scope="scope">
                            <!-- {{ handleFilterDict('YGZT', scope.row.status) }} -->
                            <span v-if="scope.row.status == '1'" class="primary">在职</span>
                            <span v-else-if="scope.row.status == '2'" class="info">离职</span>
                            <span v-else-if="scope.row.status == '3'" class="danger">退休</span>
                            <span v-else-if="scope.row.status == '4'" class="danger">停薪留职</span>
                            <span v-else-if="scope.row.status == '5'" class="primary">退休返聘</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="工作状态" align="center" width="100px">
                        <template slot-scope="scope">
                            <span v-if="scope.row.workStatus == '1'" class="primary">待机状态</span>
                            <span v-else-if="scope.row.workStatus == '2'" class="success">在项目中</span>
                            <span v-else-if="scope.row.workStatus == '3'" class="danger">离职离岗</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="totalWorkingDay" label="工作天数" width="80" align="center"/>

                    <el-table-column :label="`[${queryParams.year}]每月稼动率`" align="center">
                        <el-table-column align="right" :prop="`jdlm${index+1}`" :label="item" v-for="(item, index) in months" :key="index">

                        </el-table-column>
                    </el-table-column>

                    <el-table-column prop="sumsYearJdl" label="年度稼动率" align="center" width="120">
                        <template slot-scope="scope">
                            {{ parseFloat(scope.row.sumsYearJdl).toFixed(2) }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="date" label="每月标准天数(按华智年历)" align="center">
                        <el-table-column align="right" :prop="`wm${index+1}`" :label="item" v-for="(item, index) in months" :key="index">

                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="入职日期" prop="startDate" align="left" width="120px" show-overflow-tooltip/>
                    <el-table-column label="离职日期" prop="endDate" align="left" width="120px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.workStatus == '2' || scope.row.workStatus == '4'" type="danger" :underline="false">{{scope.row.endDate}}</el-link>
                            <el-link v-else>-</el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <TablePagination
                    class="page_tools"
                    :total.sync="queryParams.total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"/>

            </el-card>

            <!-- 弹窗, 新增 / 修改 -->
            <EmpJdlDetailDialog ref="empJdlDetail" @refreshDataList="getDataList" />


            <!-- 右侧抽屉,详情信息 -->
            <el-drawer
                ref="drawer"
                class="drawer_wrap"
                size="800px"
                :visible.sync="drawerVisible"
                :with-header="false"
                :modal="true"
                direction="rtl"
                :before-close="handleCloseDrawerDetail">
                <div class="header_title">
                    <div class="title"><i class="el-icon-document"></i> 详情</div>
                    <div class="close el-icon-close" @click="$refs.drawer.closeDrawer()"></div>
                </div>

                <div class="header_body">
                    <el-form :model="detail" :inline="false" label-width="120">
                        <table class="detail_wrap">
                            <tbody>
                                <tr>
                                    <td class="title">部门</td>
                                    <td class="info">{{detail.deptName}}</td>
                                    <td class="title">岗位</td>
                                    <td class="info">{{detail.postName}}</td>
                                </tr>
                                <tr>
                                    <td class="title">工号</td>
                                    <td class="info">{{detail.workNo}}</td>
                                    <td class="title">姓名</td>
                                    <td class="info">{{detail.name}}</td>
                                </tr>
                                <tr>
                                    <td class="title">性别</td>
                                    <td class="info">{{detail.sex=='1'?'男':'女'}}</td>
                                    <td class="title">在职状态</td>
                                    <td class="info">
                                        <el-tag type="primary" size="small" v-if="detail.workStatus === '0'">在职</el-tag>
                                        <el-tag type="danger" size="small" v-else-if="detail.workStatus === '1'">离职</el-tag>
                                        <el-tag type="danger" size="small" v-else>停薪留职</el-tag>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="title">入职日期</td>
                                    <td class="info">{{detail.joinDate}}</td>
                                    <td class="title">离职日期</td>
                                    <td class="info">
                                        <el-link v-if="detail.workStatus == '1' || detail.workStatus == '2'" type="danger" :underline="false">{{detail.quitDate}}</el-link>
                                        <el-link v-else :underline="false">-</el-link>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="title">生日</td>
                                    <td class="info">{{detail.birthday}}</td>
                                    <td class="title">年龄</td>
                                    <td class="info">{{detail.age}}</td>
                                </tr>

                                <tr>
                                    <td class="title">来源</td>
                                    <td class="info">{{detail.source}}</td>
                                    <td class="title">试用日</td>
                                    <td class="info">{{detail.trialDate}}</td>
                                </tr>
                                <tr>
                                    <td class="title">培训日</td>
                                    <td class="info">{{detail.trainDate}}</td>
                                    <td class="title">实习日</td>
                                    <td class="info">{{detail.practiceDate}}</td>
                                </tr>
                                <tr>
                                    <td class="title">开始日</td>
                                    <td class="info">{{detail.startDate}}</td>
                                    <td class="title">结束日</td>
                                    <td class="info">{{detail.endDate}}</td>
                                </tr>
                                <tr>
                                    <td class="title">毕业院校</td>
                                    <td class="info">{{detail.university}}</td>
                                    <td class="title">毕业时间</td>
                                    <td class="info">{{detail.graduatTime}}</td>
                                </tr>
                                <tr>
                                    <td class="title">专业</td>
                                    <td class="info">{{detail.major}}</td>
                                    <td class="title">学历</td>
                                    <td class="info">{{detail.educationLevel}}</td>
                                </tr>
                                <tr>
                                    <td class="title">英语等级</td>
                                    <td class="info">{{detail.englishGrade}}</td>
                                    <td class="title">日语等级</td>
                                    <td class="info">{{detail.japaneseGrade}}</td>
                                </tr>
                                <tr>
                                    <td class="title">身份证号码</td>
                                    <td class="info">{{detail.idCardNo}}</td>
                                    <td class="title">籍贯</td>
                                    <td class="info">{{detail.nativePlace}}</td>
                                </tr>
                                <tr>
                                    <td class="title">户口性质</td>
                                    <td class="info">{{detail.domicileProp}}</td>
                                    <td class="title">户口所在地</td>
                                    <td class="info">{{detail.domicilePlace}}</td>
                                </tr>
                                <tr>
                                    <td class="title">家庭电话</td>
                                    <td class="info">{{detail.phoneNo}}</td>
                                    <td class="title">联系电话</td>
                                    <td class="info">{{detail.telephone}}</td>
                                </tr>
                                <tr>
                                    <td class="title" style="flex: 1;">邮箱地址</td>
                                    <td colspan="3" class="info" style="flex: 5.38;">{{detail.email}}</td>
                                </tr>
                                <tr>
                                    <td class="title" style="flex: 1;">备注</td>
                                    <td colspan="3" class="info" style="flex: 5.38;">{{detail.remarks}}</td>
                                </tr>

                            </tbody>
                        </table>

                    </el-form>
                </div>
            </el-drawer>

        </div>
    </div>
</template>

<script>
    import TableMixin from '@/mixin/TableMixin'
    import TableTools from '@/views/components/table/table-tools'
    import TablePagination from '@/views/components/table/table-pagination'
    import DeptCascader from '@/views/hr/dept/components/show-dept-cascader'
    import EmpJdlDetailDialog from './emp_jdl_detail_dialog'
    import DictSelect from '@/views/system/sysdict/components/dict-select'
    import getDict from '@/views/system/sysdict/utils/dict'

    export default {
        mixins: [TableMixin],
        components: {
            TableTools,
            TablePagination,
            EmpJdlDetailDialog,
            DeptCascader,
            DictSelect,
        },

        data() {
            return {
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

                dataList: [],
                queryParams: {
                    year: new Date().getFullYear()+'',
                    // sortColumns: 'work_no',
                    // sortType: 'ASC',
                    deptIds: null,
                    workNo: null,
                    name: null,
                },
                detail: {
                    workNo: null,
                    name: null,
                    sex: null,
                    post: null,
                    joinDate: null,
                    deptName: null,
                    postName: null,
                    source: null,
                    siling: null,
                    practiceDate: null,
                    trainDate: null,
                    trialDate: null,
                    employRegiste: null,
                    startDate: null,
                    endDate: null,
                    university: null,
                    major: null,
                    educationLevel: null,
                    graduatTime: null,
                    japaneseGrade: null,
                    englishGrade: null,
                    idCardNo: null,
                    nativePlace: null,
                    birthday: null,
                    marriageStatus: null,
                    domicilePlace: null,
                    domicileProp: null,
                    telephone: null,
                    phoneNo: null,
                    email: null,
                    workStatus: null,
                    remarks: null
                },

                dicts: [],

            }
        },

        created() {

        },

        mounted() {
            this.$nextTick(() => {
                // this.handleGetColumnDict(['YGZT'])
                this.getDataList()
            })
        },

        methods: {

            /**
             * 侧边栏抽屉打开
             */
            handleDrawerVisible(id) {
                this.getInfo(id)
                this.drawerVisible = true
            },

            /**
             * 员工稼动率详情
             * @param {*} id
             */
            handleEmpJdlDetailVisible(id) {
                this.$nextTick(() => {
                    this.$refs.empJdlDetail.init(id)
                })
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/hr/hremployee/info/' + id,
                        method: 'GET'
                    })
                    this.detail = Object.assign({}, res.data)
                }
            },

            /**
             * 获取表格数据
             */
            async getDataList() {
                this.loading = true
                const res = await this.$http({
                    url: '/pm/jdl/page',
                    method: 'GET',
                    params: this.queryParams
                })
                if (this.ResultMessage(res, false)) {
                    this.dataList = res.data.records || []
                    this.queryParams.total = res.data.total
                }
                this.loading = false
            },

            cellStyle(row) {
                let m = new Date().getMonth() + 1
                if('jdlm'+m === row.column.property) {
                    return "color: #F56C6C; "
                }
            },

            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 6) {
                        sums[index] = '统计';
                        return;
                    }
                    // 稼动率
                    if(index >=7 && index <= 20) {
                        // 取得这列所有数据
                        const values = data.map(item => Number(item[column.property]));

                        if (!values.every(value => isNaN(value))) {
                            let total = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            if(index === 7){
                                sums[index] = total
                            } else {
                                sums[index] = parseFloat(total).toFixed(2)
                            }

                        } else {
                            sums[index] = 'N/A';
                        }
                    }

                    // 工作天数
                    if(index >=21 && index <= 32) {
                        // 取得这列所有数据
                        const values = data.map(item => Number(item[column.property]));

                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                        } else {
                            sums[index] = 'N/A';
                        }
                    }
                });

                return sums;
            },

            /**
             * 获取字典数据
             */
             async handleGetColumnDict(codes) {
                this.dicts = await getDict(codes)
            },

            /**
             * 根据表格数据筛选出对应的字典label
             * @param {*} key
             */
            handleFilterDict(label, val) {
                console.log(label, val);
                if(val) {
                    let dicts = Object.values(this.dicts[label])
                    console.log(dicts);
                    let dict = dicts.filter(item => {
                        if(item.value === val) {
                            return item
                        }
                    })
                    return dict[0].label
                }
            },

            /**
             * 更多
             */
            async handleCommand(command) {
                if (command === "export-data") {
                    this.handleExport()
                }
            },

            /**
             * 下载导出数据
             */
            async handleExport() {
                const notify = this.$notify({ title: '提示', message: '正在下载，请稍等。', type: 'success', duration: 0 });
                const data = await this.$http({
                    url: '/hr/employee/export',
                    method: 'POST',
                    responseType: 'blob',
                    data: {},
                }).catch(err => {console.log(err)})

                if (!data) { return }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', data.filename);

                document.body.appendChild(link);
                link.click()
                setTimeout(() => { notify.close() }, 1000)
            },

            /**
             * 搜索
             */
            handleSearch() {
                this.handleResetPage()
                this.getDataList()
            },

            /**
             * 重新加载数据表格
             */
            handleReload() {
                this.getDataList()
            },

            /**
             * 重置搜索表单
             */
            handleReset() {
                this.handleResetPage()
                this.$refs.search.resetFields()
                this.queryParams.deptIds = null

                this.$refs.cascader_dept.clearVal()

                this.getDataList()
            }

        }

    }
</script>
<style lang="scss">

</style>

<style lang="scss" scoped>
.container{
    .body_wrap{
        .jdl_table{
            overflow:visible !important;
            margin-bottom: 40px;
        }
        .page_tools{
            margin-top: 60px;
        }
    }
}
.detail_wrap{
    .title{
        display: flex;
        flex: 2;
    }
}
</style>
